<{include file="top.html" }>
</head>
<body>
<style>
    .ticketContainer
    {
        background-image:url(<{$preStaticUrl}>Wap/images/ticketBGLarge2.png);
        background-size:100% 100%;
        background-repeat:no-repeat;
        padding:1rem;
    }

    .firstElem{
        height:21rem;
    }
    .secondElem{
        height:17.25rem;
    }
    .QRCode{
        margin-top:1rem;
        margin-bottom:1rem;
        width:11rem;
        display:block;
    }
    .verifyCodeInput{
        background-color:#eee;
        width:18.4rem;
        height:3.9rem;
        border:none;
    }
    .hx-box{padding:3rem 0 6rem 0; text-align:center;}
    .hx-box dl i{display:inline-block; width:60%; height:3rem; background:#eee; vertical-align:middle;}

</style>
<div class="xy-panel">
    <div class="xy-panel-top">
        <div class="xy-titlebar">
            <div class="xy-titlebar-left">
                <a class="insertBefore_left_arrow_gray left_link" href="javascript:void(0);"></a>
            </div>
            <div class="xy-titlebar-title">卡券自助核销</div>
            <div class="xy-titlebar-right"></div>
        </div>
    </div>
    <div class="xy-panel-content" style="bottom:0;padding:1.5rem 1rem;">
        <div class="xy-row vDirectionRow ticketContainer" style="position:relative;">
            <div class="firstElem">
                <div class="hAlignCenterDiv" style="margin-top:1.5rem">
                    <div class="fontSizeXXL boldText blackFont" id="tName"><{$obj.cardTitle}></div>
                    <img class="QRCode" src="<{$preUploadUrl}><{$obj.photo}>" id="tQRCode"/>
                    <div class="fontSizeM" id="code"><{$obj.code}></div>
                </div>
            </div>

            <div class="secondElem vAlignCenterRow hAlignCenterRow">
                <div class="hAlignCenterDiv">
                    <div style="margin-bottom:1.5rem">核销号：<input class="verifyCodeInput" id="jobNum" name="jobNum" /></div>
                    <button class="xy-button" id="consume-btn" style="width:13.8rem">使 用</button>
                </div>

            </div>
        </div>
    </div>
</div>
<{include file="signBody.html"}>
<script>
        $("#consume-btn").click(function(event){
            var code = $('#code').html();
            var jobNum = $('#jobNum').val();
            $.post("<{u('ajaxConsume')}>",{"code":code,"jobNum":jobNum,"cardId":<{$obj.cardId}>,"restaurantId":<{$obj.restaurantId}>},
                function(data){
                    layer.msg(data.msg);
                    if(data.status==0){
                        history.back(-1);
                    }
                },'json');
        });
</script>
</body>
</html>